import React from "react";
import BaseScreen from "../BaseScreen";
import ProgressView from "../../view/ProgressView";
import { Actions, NameSpace } from "../../model/attendanceModel";
import { connect } from "react-redux";
import styles from "../../css/attendance.module.css";
import { locationTo, back } from "../../utils/LocationUtil";
import * as locations from '../../const/locations'
import { MyButton } from "../../view/MyButton";
import Config from "../../Config";
import DateTimePanel from "../components/Picker/DateTimePanel"
import Textarea from '../components/TextArea'
import UploadImgs from '../components/UploadImgs'
import { applyLeave } from '../../service/AttendService'
import { HintDialog } from '../../view/Dialog'
import { getTOKEN } from "../../utils/StorageUtil";
import { filterImgs } from '../../utils/CommomUtil'
class RecardScreen extends BaseScreen {
  constructor(props) {
    super(props)
    this.state = {
      start: '请选择时间',
      end: '请选择时间',
      startpanelOpen: false,
      endpanelOpen: false,
      reason: '',
      loading: false
    }
  }
  componentDidMount() {
    document.title = '请假申请'
  }
  getReason = (e) => {
    this.setState({
      reason: e
    })
  }
  confirm = () => {

    const { imgs } = this.refs
    const { imgList } = imgs.state
    const { reason, start, end } = this.state
    if (start === '请选择时间') {
      this.showMsgDialog('请选择开始时间')
    } else if (end === '请选择时间') {
      this.showMsgDialog('请选择结束时间')
    } else if (reason === '') {
      this.showMsgDialog('请填写请假原因')
    } else {
      this.setState({ loading: true });

      applyLeave({
        token: getTOKEN(),
        apply_start_time: start,
        apply_end_time: end,
        comment: reason,
        photo_arr: filterImgs(imgList),
      })
        .then(
          res => {
            this.setState({ loading: false });

            if (res.error_code === 0) {
              this.refs.summit.setState({
                content: '提交成功',
                visibility: true
              });
            }
            if (res.error_code === 308) {
              this.refs.summit.setState({
                content: '您已经提交过了',
                visibility: true
              });
            }
          }
        )
        .catch(
          err => {
            console.log(err)
          }
        )
    }

  }
  render() {
    const { visibility, loading } = this.state
    return (
      <div className={styles["homes"]}>
        <div className={styles["attend_container"]}>
          <div className={styles["stat_item_w"]}>
            <div className={styles["stat_item_key"]}>
              开始时间
            </div>
            <div
              className={styles["stat_item_value"]}
              onClick={() => this.setState({ startpanelOpen: true })}
            >
              {this.state.start}
            </div>
            <DateTimePanel
              show={this.state.startpanelOpen}
              onCancel={() => this.setState({ startpanelOpen: false })}
              onConfirm={value => {
                this.setState({ start: value.pass, startpanelOpen: false });
              }}
              minYear={parseInt(new Date().getFullYear(), 10)}
              maxYear={parseInt(new Date().getFullYear(), 10) + 1}
            />
          </div>
          <div className={styles["stat_item_w"]}>
            <div className={styles["stat_item_key"]}>
              结束时间
            </div>
            <div
              className={styles["stat_item_value"]}
              onClick={() => this.setState({ endpanelOpen: true })}
            >
              {this.state.end}
            </div>
            <DateTimePanel
              show={this.state.endpanelOpen}
              onCancel={() => this.setState({ endpanelOpen: false })}
              onConfirm={value => {
                this.setState({ end: value.pass, endpanelOpen: false });
              }}
              minYear={parseInt(new Date().getFullYear(), 10)}
              maxYear={parseInt(new Date().getFullYear(), 10) + 1}
            />
          </div>
        </div>
        <div className={styles["attend_container"]}>
          <div className={styles["stat_item_w"]}>

            <div className={styles["stat_item_borderBottom"]}>
              <div className={styles["stat_item_key"]}>
                <span style={{ color: 'red' }}>*</span>  原因
            </div>
            </div>
          </div>
          <div className={styles["attend_item_w"]} style={{ minHeight: '80px' }}>
            <Textarea
              onChange={this.getReason}
              placeholder=''
            />
          </div>
        </div>
        <div className={styles["attend_container"]}>
          <div className={styles["stat_item_w"]}>
            <div className={styles["stat_item_borderBottom"]}>
              <div className={styles["stat_item_key"]}>
                图片
            </div>
            </div>
          </div>
          <div className={styles["attend_item_w"]}>
            <UploadImgs ref='imgs' />
          </div>
        </div>
        <div className={styles['btn_wrapper']} style={{ padding: '120px 0 0' }}>
          <MyButton
            style={{
              width: '80%',
              borderRadius: '0.3rem'
            }}
            name={"确认提交"}
            onClick={() => {
              this.confirm();
            }}
          />
        </div>
        <HintDialog
          ref="dialog"
          style={{
            color: "#fff"
          }}
          visibility={this.state.alertMsg !== ""}
          content={this.state.alertMsg}
          operateText="确定"
        />
        <HintDialog
          ref="summit"
          style={{
            color: "#fff"
          }}
          visibility={this.state.alertMsg !== ""}
          content={this.state.alertMsg}
          operateText="确定"
          operateClick={() => { back() }}
        />
        <ProgressView visibility={this.state.loading} mode={ProgressView.MODE_MEDIUM} />

      </div>
    )
  }
}




export default RecardScreen